<template>
    <div>
        <el-tabs v-model="status" @tab-click="onTabClick" style="margin-bottom: 20px">
            <el-tab-pane v-for="(item, index) in orderStatusList" :label="getTabNameNum(item.label, item.value)" :key="index" :name="item.value.toString()"></el-tab-pane>
        </el-tabs>

        <!-- 搜索组件 -->
        <search-form :items="formItems" :params="params" :on-submit="onSearch" :btn-loading="loading" />

        <!-- 表格区域 -->
        <div class="table-body">
            <!-- 左上角按钮 -->
            <div class="table-right-top">
            </div>

            <!-- 表格 -->
            <el-table border style="width: 100%;" :data="data" v-loading="loading">
                <el-table-column align="center" prop="order_no" :label="$i18n.t('ORDER_NO')" fixed="left" :min-width="170"></el-table-column>
<!--                <el-table-column align="center" prop="uid" label="UID" :min-width="150"></el-table-column>-->
                <el-table-column align="center" prop="real_name" :label="$i18n.t('REAL_NAME')" :min-width="150"></el-table-column>
                <el-table-column align="center" prop="mobile" :label="$i18n.t('PHONE_NUMBER')" :min-width="150"></el-table-column>
                <el-table-column align="center" prop="id_number" :label="$i18n.t('ID_NUMBER')" :min-width="150"></el-table-column>
                <el-table-column align="center" prop="apply_amount" :label="$i18n.t('APPLY_AMOUNT')" :min-width="100"></el-table-column>
                <el-table-column align="center" prop="apply_term" :label="$i18n.t('APPLY_TERM')" :min-width="100"></el-table-column>
                <el-table-column align="center" prop="loan_number" :label="$i18n.t('LOAN_NUMBER')" :min-width="100">
                    <template slot-scope="scope">
                        <el-tag size="mini" :type="scope.row.loan_number > 1 ? 'success' : 'danger'" effect="dark">
                            {{ scope.row.loan_number }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="create_time" :label="$i18n.t('CREATE_TIME')" :min-width="150"></el-table-column>
                <el-table-column align="center" prop="apply_time" :label="$i18n.t('APPLY_TIME')" :min-width="150"></el-table-column>
                <el-table-column align="center" prop="status" :label="$i18n.t('ORDER_STATUS')" fixed="right" :min-width="150">
                    <template slot-scope="scope">
                        <el-tag size="mini" v-if="scope.row.status === 0" type="info" effect="dark">{{ scope.row.status_text }}</el-tag>
                        <el-tag size="mini" v-if="scope.row.status === 1" type="info" effect="dark">{{ scope.row.status_text }}</el-tag>
                        <el-tag size="mini" v-if="scope.row.status === 2" type="warning" effect="dark">{{ scope.row.status_text }}</el-tag>
                        <el-tag size="mini" v-if="scope.row.status === 3" type="danger" effect="dark">{{ scope.row.status_text }}</el-tag>
                        <el-tag size="mini" v-if="scope.row.status === 4" type="warning" effect="dark">{{ scope.row.status_text }}</el-tag>
                        <el-tag size="mini" v-if="scope.row.status === 5" type="danger" effect="dark">{{ scope.row.status_text }}</el-tag>
                        <el-tag size="mini" v-if="scope.row.status === 6" type="info" effect="dark">{{ scope.row.status_text }}</el-tag>
                        <el-tag size="mini" v-if="scope.row.status === 7" type="default" effect="dark">{{ scope.row.status_text }}</el-tag>
                        <el-popover
                            v-if="scope.row.status === 8"
                            placement="top-start"
                            :title="$i18n.t('FAILED_REASON')"
                            width="200"
                            trigger="hover"
                            :content="scope.row.pay_failed_reason"
                        >
                            <el-tag slot="reference" size="mini" type="danger" effect="dark">{{ scope.row.status_text }}</el-tag>
                        </el-popover>
                        <el-tag size="mini" v-if="scope.row.status === 80" type="default" effect="dark">{{ scope.row.status_text }}</el-tag>
                        <el-tag size="mini" v-if="scope.row.status === 9" type="success" effect="dark">{{ scope.row.status_text }}</el-tag>
                        <el-tag size="mini" v-if="scope.row.status === 10" type="warning" effect="dark">{{ scope.row.status_text }}</el-tag>
                    </template>
                </el-table-column>
                <!-- 右侧按钮 -->
                <el-table-column align="center" :label="$i18n.t('ACTION')" fixed="right" :width="200">
                    <template slot-scope="scope">
                        <span v-auth="'view'" >
                            <el-link icon="el-icon-view" @click="onView(scope.row)">{{ $i18n.t('VIEW') }}</el-link>
                        </span>
                        <span v-if="scope.row.status === 8" v-auth="'cancel'">
                            <el-divider direction="vertical"></el-divider>
                            <el-link icon="el-icon-close" @click="onCancel(scope.row)">{{ $i18n.t('CANCEL') }}</el-link>
                        </span>
                        <span v-if="scope.row.status === 8" v-auth="'makeLoan'">
                            <el-divider direction="vertical"></el-divider>
                            <el-link icon="el-icon-custom-payment" @click="onMakeLoan(scope.row)">{{ $i18n.t('MAKE_LOAN') }}</el-link>
                        </span>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="table-pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next, ->, sizes"
                    :page-size.sync="page.perPage"
                    :total="page.total"
                    :page-count="page.pageCount"
                    :current-page.sync="page.currentPage"
                    :page-sizes="PAGES_SIZE"
                    @current-change="onCurrentPageChange"
                    @size-change="onPerPageChange"
                >
                </el-pagination>
            </div>
        </div>

        <!-- 详情 -->
        <Modal
            :title="$i18n.t('RE_MAKE_LOAN')"
            v-model="makeLoanDialog"
            width="500"
        >
            <el-form ref="ruleForm" label-width="100px">
                <el-form-item :label="$i18n.t('ORDER_NO')" required>
                    <el-input v-model="mdl.order_no" :placeholder="$i18n.t('PLEASE_INPUT', { value: $i18n.t('ORDER_NO') })" style="width: 85%" disabled></el-input>
                </el-form-item>
                <el-form-item :label="$i18n.t('BANK_CODE')" required :error="errors.bank_code">
                    <el-input v-model="mdl.bank_code" :placeholder="$i18n.t('PLEASE_INPUT', { value: $i18n.t('BANK_CODE') })" style="width: 85%"></el-input>
                </el-form-item>
                <el-form-item :label="$i18n.t('BANK_ACCOUNT')" required :error="errors.bank_account">
                    <el-input v-model="mdl.bank_account" :placeholder="$i18n.t('PLEASE_INPUT', { value: $i18n.t('BANK_ACCOUNT') })" style="width: 85%"></el-input>
                </el-form-item>
                <el-form-item :label="$i18n.t('BANK_PHONE')" required :error="errors.bank_phone">
                    <el-input v-model="mdl.bank_phone" :placeholder="$i18n.t('PLEASE_INPUT', { value: $i18n.t('BANK_PHONE') })" style="width: 85%"></el-input>
                </el-form-item>
                <el-form-item v-if="errorMessage !== ''">
                    <Alert type="error" show-icon>{{ errorMessage }}</Alert>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
<!--                <el-form-item :error="errors.submit">-->
<!--                    <el-button type="primary" @click="onHandleReMakeLoan" :loading="loading" :disabled="loading">{{ $i18n.t('RE_MAKE_LOAN') }}</el-button>-->
<!--                    <el-button @click="makeLoanDialog = false">{{ $i18n.t('CANCEL') }}</el-button>-->
<!--                </el-form-item>-->
                <el-button @click="makeLoanDialog = false">{{ $i18n.t('CANCEL') }}</el-button>
                <el-button type="primary" @click="onHandleReMakeLoan" :loading="loading" :disabled="loading">{{ $i18n.t('RE_MAKE_LOAN') }}</el-button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import SearchForm from '@/components/SearchForm'
    import { getOrder, orderCancel, orderMakeLoan } from '@/api/order'
    import { PAGES_SIZE } from '@/config/constants'

    export default {
        name: 'OrderList',
        components: { SearchForm },
        data () {
            return {
                PAGES_SIZE,
                params: {
                    apply_amount: [null, null],
                    apply_term: [null, null]
                },
                data: [],
                page: {
                    total: 0,
                    currentPage: 1,
                    perPage: PAGES_SIZE[0],
                    pageCount: 1
                },
                loading: false,
                status: 'all',
                status_nums: [],
                makeLoanDialog: false,
                mdl: {},
                errors: {},
                errorMessage: ''
            }
        },
        created () {
            this.fetch()
        },
        computed: {
            formItems () {
                const LoanType = this.$store.getters.options.LoanedTypeList
                // 构建搜索表单
                return [
                    { title: this.$i18n.t('ORDER_NO'), type: 'input', key: 'order_no', maxlength: 50 },
                    { title: this.$i18n.t('PHONE_NUMBER'), type: 'input', key: 'mobile', maxlength: 20 },
                    { title: this.$i18n.t('REAL_NAME'), type: 'input', key: 'real_name', maxlength: 20 },
                    { title: this.$i18n.t('PRODUCT_NAME'), type: 'select', key: 'product_id', options: this.$store.getters.options.ProductList },
                    { title: this.$i18n.t('ORDER_STATUS'), type: 'select', key: 'status', options: this.$store.getters.options.OrderStatusList },
                    { title: this.$i18n.t('APPLY_AMOUNT'), type: 'input-number-range', key: 'apply_amount' },
                    { title: this.$i18n.t('APPLY_TERM'), type: 'input-number-range', key: 'apply_term' },
                    { title: this.$i18n.t('CREATE_TIME'), type: 'date-range', key: 'create_time' },
                    { title: this.$i18n.t('MAKE_LOAN_TIME'), type: 'date-range', key: 'make_loan_time' },
                    { title: this.$i18n.t('LOAN_TYPE'), type: 'select', key: 'loan_type', options: LoanType }
                ]
            },
            orderStatusList () {
                const statusList = [...this.$store.getters.options.OrderStatusList]
                statusList.unshift({
                    label: this.$i18n.t('ALL'),
                    value: 'all'
                })
                return statusList
            }
        },
        methods: {
            // 搜索按钮
            onSearch () {
                this.fetch()
            },
            // 从接口拉取数据
            fetch () {
                this.loading = true
                getOrder({ ...this.params, page: this.page.currentPage, perPage: this.page.perPage }).then((res) => {
                    // eslint-disable-next-line camelcase
                    const { data, last_page, total, status_nums } = res.result
                    this.data = data
                    // eslint-disable-next-line camelcase
                    this.status_nums = status_nums
                    this.page.total = total
                    // eslint-disable-next-line camelcase
                    this.page.pageCount = last_page
                }).finally(() => {
                    this.loading = false
                })
            },
            // 页数切换
            onCurrentPageChange (page) {
                this.page.currentPage = page
                this.fetch()
            },
            // 每页显示数量修改
            onPerPageChange (perPage) {
                this.page.perPage = perPage
                this.fetch()
            },
            // 查看订单
            onView (row) {
                this.$router.push({
                    path: '/order/detail',
                    query: {
                        id: row.id
                    }
                })
            },
            // 订单放款
            onMakeLoan (row) {
                this.makeLoanDialog = true
                this.errorMessage = ''
                this.errors = {}
                this.mdl = {
                    id: row.id,
                    bank_account: row.bank_account,
                    bank_code: row.bank_code,
                    bank_phone: row.bank_phone,
                    order_no: row.order_no
                }
            },
            // 处理重新放款
            onHandleReMakeLoan () {
                // 先清空表单错误提示
                this.errors = {}
                this.loading = true
                // 设置手动接管message提示
                this.$store.dispatch('MessageTake', true)
                this.errorMessage = ''
                orderMakeLoan(this.mdl.id, this.mdl).then(res => {
                    this.$Message.success(this.$i18n.t('HANDLE_SUCCESS'))
                    setTimeout(() => {
                        this.fetch()
                    }, 500)
                    this.makeLoanDialog = false
                }).catch((error) => {
                    // 后端过来的表单错误回显
                    this.errors = Object.assign({}, { ...this.errors, ...error.errors })
                    // 手动处理错误
                    if (!error.errors) {
                        this.errorMessage = error.message
                    }
                }).finally(() => {
                    this.loading = false
                })
            },
            // 订单取消
            onCancel (row) {
                orderCancel(row.id).then(res => {
                    this.$Message.success(this.$i18n.t('HANDLE_SUCCESS'))
                    setTimeout(() => {
                        this.fetch()
                    }, 500)
                }).catch(() => {})
            },
            // 订单状态筛选切换
            onTabClick (a, b) {
                this.params = {
                    apply_amount: [null, null],
                    apply_term: [null, null]
                }
                this.params.status = this.status === 'all' ? null : parseInt(this.status)
                this.fetch()
            },
            getTabNameNum (label, value) {
                if (value === 'all') return label
                const find = this.status_nums.find(item => item.status === value)
                const num = (typeof find === 'undefined') ? 0 : find.num
                return label + '(' + num + ')'
            }
        }
    }
</script>

<style lang="less" scoped>
</style>
